<template>
	<hm-layout>
		<view class="home-content">
			<view class="avatar-list" v-if="templateList.length > 0 && firstLoaded">
				<view class="avatar-item" v-for="(item, index) in templateList">
					<image class="avatar-image" :src="item.previewUrl[0]" lazyLoad />
					<view class="avatar-item_footer">
						<view class="avatar-price">
							<text class="price-unit">￥</text>{{ item.salePrice / 100 }}
						</view>
						<hm-pay :templateId="item.template_id" orderType="template" @paySuccess="paySuccess"></hm-pay>
					</view>
				</view>
			</view>
			<view v-if="firstLoaded && templateList.length === 0" class="avatar-empty">
				<hm-empty imageUlr="collect" text="暂无可购买模板">
				</hm-empty>
			</view>
		</view>
	</hm-layout>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	let activeIndex = ref(0)
	let templateList = ref([])
	let firstLoaded = ref(false)
	const change = (index) => {
		console.log(index)
	}
	onMounted(() => {
		getTemplateList()
	})
	const getTemplateList = () => {
		vk.callFunction({
			url: 'client/template/kh/user-template-shop',
			title: '请求中...',
			success(data) {
				const {
					rows = []
				} = data;
				// 修改成功
				templateList.value = rows;
				firstLoaded.value = true
			},
			fail(error) {
				firstLoaded.value = true
				vk.toast('查询失败,请稍后再试!');
			},
		});
	}
	const paySuccess = () => {
		vk.toast('购买成功！')
		getTemplateList()
    vk.vuex.dispatch('$user/fetchMytemplate', vk);
	}
	const pageTo = (template) => {
		vk.navigateTo({
			url: template.path,
			events: {
				// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				update: (data) => {
					// 当B页面运行 eventChannel.emit('update', { a:1 }); 时，会运行这里的代码逻辑。
				}
			},
			success: (res) => {
				// 通过eventChannel向被打开页面传送数据
				console.log('template.path', template.path);
				uni.$once('get:' + template.path, () => {
					uni.$emit('post:' + template.path, template);
				});
			}
		})
	}
</script>
<style lang="scss">
	.home-content {
		padding: 0 10rpx;
		position: relative;
		z-index: 1;

		.avatar-list {
			display: flex;
			flex-wrap: wrap;

			.avatar-item {
				width: 33.33%;
				margin-top: 30rpx;
				border-radius: 8px;
				border: 0px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.avatar-name {
				font-size: 22rpx;
				width: 100%;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
			}

			image {
				border-radius: 4px;
				border: 0px;
			}

			.avatar-image {
				border-radius: 4px;
				border: 0px;
				width: 212rpx;
				height: 212rpx;
			}

			.avatar-item_footer {
				width: 212rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 16rpx;

				.avatar-price {
					font-size: 30rpx;
					color: red;
					line-height: 36rpx;

					.price-unit {
						font-size: 24rpx;
					}
				}

				.buy-btn {
					width: 90rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					letter-spacing: 4rpx;
				}
			}
		}
	}
</style>